var names=$.cookie("username")?JSON.parse($.cookie("username")):[];
if($.cookie("username")){
    huanying=`<div class="dc fl">欢迎${names}</div>`;
    $('.fr .dc').html(huanying);
};
var goodsid=location.search.split('=')[1];
let str='';
let arr=''; 
var count='';     
$.get('../html/getGoodsInfo.php',{goodsId:goodsid},function(data){
  console.log(data);
    var res = JSON.parse(data)
    console.log(res);
     str= ` <div class="banner">
     <div class="main">
         <img src="${res.goodsImg}" alt="">
     </div>
     <div class="thumb">
         <div class="thumb-conter">
             <div class="imgbox">
                 <img src="${res.beiyong1}" alt="">
             </div>
             <div class="imgbox">
                 <img src="${res.beiyong2}" alt="">
             </div>
             <div class="imgbox">
                 <img src="${res.beiyong3}" alt="">
             </div>
             <div class="imgbox">
                 <img src="${res.beiyong4}" alt="">
             </div>
         </div>
     </div>
 </div>
 <div class="ceart">
     <div class="name">
        <img src="../image/首页/推荐/ziying.png" alt=""> <span>${res.goodsName}</span> 
     </div>
     <div class="leixing">
         <span>${res.goodsDesc}</span>
     </div>
     <div class="shoujia">
         <div class="card">
             <h5>售价</h5>
             <div class="price">
                 <span>￥</span>
                 <span class="value">${res.goodsPrice}</span>
             </div>
         </div>
         <div class="card2">
             <h5>服务</h5>
             <div>
                 <div class="item">
                     <span></span>满69包邮
                 </div>
                 <div class="item">
                     <span></span>小米自营
                 </div>
                 <div class="item">
                     <span></span>7天无理由退货
                 </div>
             </div>
         </div>
     </div>
     <div class="quyu">
         <h5>配送区域</h5>
         <div class="word">
             <div>
                 <span>北京 北京市 海淀区</span>
                 <span>
                     <a href="">修改</a>
                 </span>
             </div>
         </div>
     </div>
     <div class="size">
         <h5>内存容量</h5>
         <div class="size-conter">
             <div class="sizebox">
                 32G
             </div>
             <div class="sizebox">
                 64G
             </div>
         </div>
     </div>
     <div class="jiajian">
         <h5>数量</h5>
         <div>
             <div><button class='jian'>-</button></div>
             <input type="text" value="1" class="shuliang">
             <div><button class='jia'>+</button></div>
         </div>
     </div>
     <div class="footline">
         <div class="lianjie">
             <span  class="all">加入购物车</span>
             <a href="" class="all1">立即结算</a>

         </div>
         <div class="shoucang">
             <a href="" class="iconfont icon-lihe"></a>
             <p>收藏</p>
         </div>
         <div class="shoucang">
             <a href="" class="iconfont icon-kefu"></a>
             <p>客服</p>
         </div>
     </div>
 </div>`;
 arr=` <img src="${res.beiyong1}" alt="">                  
 <img src="${res.beiyong1}" alt="">                   
 <img src="${res.beiyong2}" alt="">                  
 <img src="${res.beiyong3}" alt="">
 <img src="${res.beiyong4}" alt="">
 <img src="${res.beiyong5}" alt="">
 <img src="${res.beiyong6}" alt="">
 <img src="${res.beiyong7}" alt="">
 <img src="${res.beiyong8}" alt="">
 <img src="${res.beiyong9}" alt="">
 <img src="${res.beiyong10}" alt="">
 <img src="${res.beiyong11}" alt="">
 <img src="${res.beiyong12}" alt="">
 <img src="${res.beiyong13}" alt="">
 `;
 $('.body .container .header').html(str);
 $('.shangpinxiangqing .imgs').html(arr);

 //点击事件 点小盒子图片，旁边大盒子图片src=小盒子图片的src
 $('.body .container .header .thumb .thumb-conter .imgbox img').on('click',function(){
    $('.body .container .header .banner .main img').attr('src',$(this).attr("src"));
    console.log("我被点了");


})
//点击-数量-1


var count=parseInt( $('.shuliang').val());
$('.jian').on('click',function(){
 
    console.log("我被点了");
    if(count<=1){
        count==1
    }else{
        count-=1
    }
   

    $('.shuliang').val(count);
})


//点击+数量+1
$('.jia').on('click',function(){
    console.log("我被点了");
    count+=1
    
    $('.shuliang').val(count);
}
)
console.log($('.shuliang').val());


$('.footline .lianjie .all').on('click',function(){
 
 var count=parseInt( $('.shuliang').val());
    console.log({vipName:names,goodsId:goodsid,goodsCount:count});
   console.log(count);
    if($.cookie("username")){
        $.post('../html/addShoppingCart.php',{vipName:names,goodsId:goodsid,goodsCount:count},
        function(data){
            if(data==1){
                window.alert('添加购物车成功')
            }else if(data==0){
                window.alert('添加购物车失败')
            }
        }
        )
        
    }else{
        alert('请先登陆')
        location.href='../html/小米有品登陆.html'
    }

})
});
let leibie='';
$.get('../html/getGoodsType.php',function(data){
    var fenleichuangcao=JSON.parse(data);

    fenleichuangcao.forEach(item=>{
        leibie+=`<div class="chuangzao" onclick='location.href="./商品栏界面.html?typesid=${item.typeId}"'>${item.goodsType}</div>`
    })
    $('.fenleishangpin').html(leibie);
    
    console.log(data);
    console.log(leibie);
})


